'use client'
import TodoList from "@/components/TodoList";
import TodoAdd from "@/components/TodoAdd";
import TodoFilter from  "@/components/TodoFilter";

import { useState } from "react";

import { Todo } from "../types";
export default function Home() {
  const [todos, setTodos] = useState<Todo[]>([])
  
  const [filter, setFilter] = useState('all')

  const addTodo = (text:string)=>{
    const newTodo:Todo = {
      id: Date.now(),
      text,
      completed:false
    }
    setTodos([...todos, newTodo])
  }
  const deleteTodo = (id:number)=>{
    setTodos(todos.filter(todo=>todo.id !== id))
  }
  const toggleTodo = (id:number)=>{
    setTodos(todos.map(todo=>todo.id === id ? {...todo, completed:!todo.completed}:todo))
  }

  const getFilteredTodos = ()=>{
    switch(filter){
      case 'completed':
        return todos.filter(todo=>todo.completed)
      case 'active':
        return todos.filter(todo=>!todo.completed)
      default:
        return todos
    }
  }
  return (
      <div>
        <TodoAdd addTodo={addTodo}></TodoAdd>
        <TodoList todos={getFilteredTodos()} deleteTodo={deleteTodo} toggleTodo={toggleTodo}></TodoList>
        <TodoFilter filter={filter} setFilter={setFilter}></TodoFilter> 
      </div>

  );
}
